<template>
  <div>
    <div>
      <!-- 上半部分的内容 -->
      <router-view />
    </div>
    <!-- 底部选项卡 -->
    <van-tabbar
      v-model="current"
      fixed
      active-color="#9a4145"
      :border="false"
      placeholder
    >
      <van-tabbar-item name="index" @click="goIndex">
        首页
        <template #icon>
          <!-- 选中状态 -->
          <img v-show="current == 'index'" src="@/assets/img/icon/home_1.png" />
          <!-- 未选中状态 -->
          <img v-show="current != 'index'" src="@/assets/img/icon/home_0.png" />
        </template>
      </van-tabbar-item>
      <!-- 拍卖项 -->
      <van-tabbar-item name="sale" @click="goSale">
        拍卖
        <template #icon>
          <!-- 选中状态 -->
          <img v-show="current == 'sale'" src="@/assets/img/icon/scal_1.png" />
          <!-- 未选中状态 -->
          <img v-show="current != 'sale'" src="@/assets/img/icon/scal_0.png" />
        </template>
      </van-tabbar-item>
      <!-- 发现项 -->
      <van-tabbar-item name="seed" @click="goCart">
        发现
        <template #icon>
          <!-- 选中状态 -->
          <img
            v-show="current == 'seed'"
            src="@/assets/img/icon/find_1.png"
          />
          <!-- 未选中状态 -->
          <img
            v-show="current != 'seed'"
            src="@/assets/img/icon/find_0.png"
          />
        </template>
      </van-tabbar-item>
      <!-- 我的项 -->
      <van-tabbar-item name="me" @click="goMe">
        我的
        <template #icon>
          <!-- 选中状态 -->
          <img v-show="current == 'me'" src="@/assets/img/icon/me_1.png" />
          <!-- 非选中状态 -->
          <img v-show="current != 'me'" src="@/assets/img/icon/me_0.png" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      current: this.$route.path.split("/")[2],
    };
  },
  computed:{
    ...mapState(['is_sale'])
  },
  methods: {
    goMe() {
      if (this.$route.path !== "/home/me"){
          this.$router.push("/home/me")
        }  
    },
    goIndex() {
      if (this.$route.path !== "/home/index") this.$router.push("/home/index");
    },
    goCart() {
      if (this.$route.path !== "/home/seed/zixun")
        this.$router.push("/home/seed/zixun?family=1");
    },
    goSale() {
      if (this.$route.path !== "/home/sale/daySale") this.$router.push("/home/sale/daySale");
    },
  },
  watch:{
    $route(newVal){
      this.current=newVal.path.split("/")[2]
    }
  }
};
</script>

<style lang="scss" scoped>
</style>